<template>
    <!-- <div> -->
        <template v-for="menu in menus">
            <!-- 如果menu存在下级节点，则使用子菜单栏，否则使用菜单项 -->
            <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.path">
                <template #title>
                    <!-- 图标，有可能没有图标属性和值，因此做些判断 -->
                    <el-icon>
                        <template v-if="menu.meta && menu.meta.icon">
                            <component :is="menu.meta.icon"></component>
                        </template>
                        <template v-else>
                            <setting></setting>
                        </template>
                    </el-icon>
                    <span>{{ menu.meta.title }}</span>
                </template>
                <MenuItem :menus="menu.children">
                </MenuItem>
            </el-sub-menu>
            <el-menu-item v-else :index="menu.path">
                <!-- 图标，有可能没有图标属性和值，因此做些判断 -->
                <el-icon>
                    <template v-if="menu.meta && menu.meta.icon">
                        <component :is="menu.meta.icon"></component>
                    </template>
                    <template v-else>
                        <setting></setting>
                    </template>
                </el-icon>
                <template #title>{{ menu.meta.title }}</template>

            </el-menu-item>
        </template>
    <!-- </div> -->
</template>
<script setup>
const props = defineProps(['menus'])
</script>